<template>
    <div o-Container>
        <div class="top_box">
            <div class="search_box">
                <img src="/static/skin/herodoo/main/platform/home/img/search.png" alt="">
                <input :value="searchValue" type="text" placeholder="请输入搜索内容" @keydown.enter="searchEnterKeyPress"
                    @blur="searchEnterKeyPress">
            </div>
            <div class="button_box">
                <button @click="addNew()">新增主题类型</button>
            </div>
        </div>
        <o-list v-bind:source="list.contract">
            <template slot="config" slot-scope="scope">
                <div class="img_box">
                    <img @click="look(scope)" src="/static/skin/default/MCS/AIGC/Inventory/images/chakan.png" alt="">
                    <img @click="edit(scope)" src="/static/skin/default/MCS/AIGC/Inventory/images/bianji.png" alt="">
                    <img @click="del(scope)" src="/static/skin/default/MCS/AIGC/Inventory/images/shanchu.png" alt="">
                </div>
            </template>
        </o-list>
        <EditType ref="editType" @reload="reload"></EditType>
    </div>
</template>

<script>
import EditType from "./Components/editType.vue"
export default {
    components: {
        EditType
    },
    name: "mms_platform_company_list", /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
    data() {
        return {
            octopus: this.$parent.octopus,
            list: {
                contract: {
                    data: {
                        id: 1276, // 菜单表的八爪鱼ID
                        cellData: [
                            { name: "Name" },	// 主题/热点名称
                            { name: "Sort" },	// 排序优先级
                            { name: "CreateUserID" },	// 创建人
                            { name: "CreateTime" },	// 创建时间
                            { name: "ID", show: false },	// ID
                            { name: "Status", show: false },	// 状态
                            { name: "TypeID", show: false ,filterKey:"=",filterValue:1},	// 类型ID
                            { name: "UpdateTime", show: false },	// 维护时间
                            { name: "UpdateUserID", show: false },	// 维护人
                        ],
                        paramData: {}
                    },
                    configWidth: 90,
                    showNumber: true,
                },
            },
            isEdit: false
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            const data = this.list.contract.data;
            const company = this.octopus.passport.authorization.company
            data.paramData.CompanyID = company == 1 ? 'NULL' : company
        },
        addNew() {
            this.$refs.editType.drawerOpen(null, 'CREATE')
        },
        look(row) {
            this.$refs.editType.drawerOpen(row.data.row, 'look');
        },
        edit(row) {
            this.$refs.editType.drawerOpen(row.data.row, 'UPDATE')
        },
        del(row) {
            this.$confirm(`确定删除这个主题类型吗?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                // type: 'warning'
                center: true
            }).then(res => {
                this.api_1276(row.data.row.ID)
            }).catch(() => {
                console.log('取消了');
            })
        },
        api_1276(ID) {
            this.octopus.request.api.post("/Octopus/Engine/Item", {
                id: 1276, // 菜单表的八爪鱼ID
                type: "DELETE",
                value: ID,
                cellData: [],
            },
                // 处理回调事件，通过分析data.status.code的状态来实现。
                (data) => {
                    if (data.status.code === 200) {
                        this.list.contract.control.load();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    } else {
                        this.octopus.tips.error(data);
                    }
                }
            );
        },
        reload() {
            this.list.contract.control.load();
        }
    },
    props: ["oData"]
}
</script>
<style scoped>
.top_box {
    width: 100%;
    height: 5.3rem;
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-bottom: 1.2rem;
    box-sizing: border-box;
}

.top_box .search_box {
    width: 32rem;
    height: 100%;
    border: 1px solid #F0F0F0;
    border-radius: 4rem;
    display: flex;
    justify-content: space-between;
    padding: 0 .8rem;
    box-sizing: border-box;
}

.top_box .search_box input {
    border: none;
    outline: none;
    width: 70%;
}

.top_box .search_box img {
    cursor: pointer;
}

.top_box .button_box button {
    width: 15rem;
    height: 100%;
    border-radius: 4rem;
    border: none;
    color: #fff;
    background-color: #F78C52;
    box-shadow: 0px -3px 4px 0px rgba(204, 190, 186, 0.4);
    font-size: 1.7rem;
    cursor: pointer;
}

.top_box .button_box button {
    margin-right: 1.3rem;
}

.el-message-box {
    background-color: #fff !important;
}

.img_box {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.img_box img {
    width: 25px;
    cursor: pointer;
}

.disable {
    cursor: not-allowed;
    opacity: 0.5;
}

>>>.Content {
    height: 84vh !important;
}
</style>